<li class="purple">
   <a data-toggle="dropdown" class="dropdown-toggle" href="#">
   <i class="icon-bell-alt icon-animated-bell"></i>
   <span class="badge badge-important">8</span>
   </a>
   <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-closer">
      <li class="nav-header">
         <i class="icon-warning-sign"></i>
         8 Notifications
      </li>
      <li>
         <a href="#">
            <div class="clearfix">
               <span class="pull-left">
               <i class="btn btn-mini no-hover btn-pink icon-comment"></i>
               New Comments
               </span>
               <span class="pull-right badge badge-info">+12</span>
            </div>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="btn btn-mini btn-primary icon-user"></i>
         Bob just signed up as an editor ...
         </a>
      </li>
      <li>
         <a href="#">
            <div class="clearfix">
               <span class="pull-left">
               <i class="btn btn-mini no-hover btn-success icon-shopping-cart"></i>
               New Orders
               </span>
               <span class="pull-right badge badge-success">+8</span>
            </div>
         </a>
      </li>
      <li>
         <a href="#">
            <div class="clearfix">
               <span class="pull-left">
               <i class="btn btn-mini no-hover btn-info icon-twitter"></i>
               Followers
               </span>
               <span class="pull-right badge badge-info">+11</span>
            </div>
         </a>
      </li>
      <li>
         <a href="#">
         See all notifications
         <i class="icon-arrow-right"></i>
         </a>
      </li>
   </ul>
</li>